let data = {
    name: '谭',
    age: '18',
    info: {
        city: 'beijing',
        a: {
            b: {
                c: {
                    d: 7
                }
            }
        }
    }
}


function getName() {
    let nameDom = document.querySelector('.name')
    nameDom.textContent = `姓名:` + data.name
}
function getAge() {
    let nameDom = document.querySelector('.age')
    nameDom.textContent = `年龄:` + data.age
}
function isObject(obj) {
    return typeof obj === 'object' && obj !== null;
}



let proxy = observeProxy(data)
// 回调函数储存数组
let callbacks = new Map()
// 使用过的函数属性
let usedReactivities = []


function effect(callback) {
    usedReactivities = []
    callback()
    console.log(usedReactivities)
    for (let reactivity of usedReactivities) {
        if (!callbacks.has(reactivity[0])) {
            callbacks.set(reactivity[0], new Map());
        }
        if (!callbacks.has(reactivity[1])) {
            callbacks.get(reactivity[0]).set(reactivity[1], []);

        }
        callbacks.get(reactivity[0]).get(reactivity[1]).push(callback);
    }
}
effect(() => {
    getName()
})

document.getElementById('input').addEventListener('input', event => proxy.name = event.target.value)

function setName() {
    proxy.name
}

function observeProxy(data) {
    let proxy = new Proxy(data, {
        get(target, k) {
            let v = target[k];
            usedReactivities.push([target, k])
            if (isObject(target[k])) {
                v = observeProxy(target[k])
            }


            console.log(k, 'vue3读取了')
            return v
        },
        set(target, k, newValue) {
            console.log(k, 'vue3更改了')
            if (callbacks.get(target)) {
                if (callbacks.get(target).get(k)) {
                    for (let callback of callbacks.get(target).get(k)) {
                        callback();
                    }
                }
            }

            target[k] = newValue
            return target[k]
        }
    })
    // console.log(listFun)
    return proxy
}


// getAge()



function observe(data) {
    let proxyConfig = {
        // 获取属性
        get(target, key, receiver) {
            console.log(key, '获取属性')
            let result = Reflect.get(target, key, receiver)
            return result
        },
        // 设置属性
        set(target, key, val, receiver) {
            console.log(key, '设置属性')
            const result = Reflect.set(target, key, val, receiver)
            return result;
        },
        // 删除属性
        deleteProperty(target, key) {
            let result = Reflect.deleteProperty(target, key)
            return result;
        }
    }
    let proxy = new Proxy(data, proxyConfig)
    return proxy
}
// let proxyData = observe(data)
// getName()


function createList() {
    let list = []
    for (let i = 0; i < 17; i++) {
        let numberTemperature = randomNumber(31, 27)
        let codeNumber = randomNumber(9, 0)
        let item = {
            time: `2023-05-21 ${0 + i > 10 ? 0 + i : '0' + i}:00:00`,
            code: codeNumber,
            text: mapCodeText(codeNumber),
            temperature: numberTemperature
        }
        list.push(item)
    }
    console.log(list)
}

function randomNumber(max, min) {
    return Math.floor(Math.random() * (max - min + 1)) + min
}
function mapCodeText(code) {
    let map = new Map()
    map.set(0, '晴')
    map.set(1, '晴')
    map.set(2, '晴')
    map.set(3, '晴')
    map.set(4, '多云')
    map.set(5, '晴间多云')
    map.set(6, '晴间多云')
    map.set(7, '大部多云')
    map.set(8, '大部多云')
    map.set(9, '阴')
    return map.get(code)
}
function qualityText(number) {
    if (number >= 0 && number <= 50) {
        return '优'
    } else if (number >= 51 && number <= 100) {
        return '良'
    } else if (number >= 101 && number <= 150) {
        return '轻度污染'
    } else if (number >= 151 && number <= 200) {
        return '中度污染'
    } else if (number >= 201 && number <= 300) {
        return '重度污染'
    } else if (number > 300) {
        return '严重污染'
    }
}




// 试题2
// {console.log(1)

// setTimeout(function () {

//     console.log(2)

//     new Promise(function (resolve) {

//         console.log(3)

//         resolve()

//     }).then(function () {

//         console.log(4)

//     })

// })

// new Promise(function (resolve) {

//     console.log(5)

//     resolve()

// }).then(function () {

//     console.log(6)

// })

// setTimeout(function () {

//     console.log(7)

//     new Promise(function (resolve) {

//         console.log(8)

//         resolve()

//     }).then(function () {

//         console.log(9)

//     })

// })

// console.log(10)}



// 试题3
// {console.log(1)

// setTimeout(function () {

//     console.log(2)

// }, 0)

// const p = new Promise((resolve, reject) => {

//     console.log(3)

//     resolve(1000) // 标记为成功

//     console.log(4)

// })

// p.then(data => {

//     console.log(data)

// })

// console.log(5)}


//  试题4
// {new Promise((resolve, reject) => {

//     resolve(1)

//     new Promise((resolve, reject) => {

//         resolve(2)

//     }).then(data => {

//         console.log(data)

//     })

// }).then(data => {

//     console.log(data)

// })

// console.log(3)}
// {
//     console.log(3)
//     new Promise((resolve, reject) => {
//         console.log(6)
//         resolve(4)
//         new Promise((resolve, reject) => {
//             reject(8)
//         }).then(data => {
//             console.log(data)
//         }, err => {
//             console.log(10)
//             console.log(err)
//         })
//     }).then(data => {
//         console.log(7)
//         console.log(data)
//     })
//     console.log(1)

// }


// {
//     new Promise((resolve, reject) => {
//         console.log("log: 外部promise")
//         resolve()
//     })
//         .then(() => {
//             console.log("log: 外部第一个then")
//             new Promise((resolve, reject) => {
//                 console.log("log: 内部promise")
//                 resolve()
//             })
//                 .then(() => {
//                     console.log("log: 内部第一个then")
//                 })
//                 .then(() => {
//                     console.log("log: 内部第二个then")
//                 })
//         })
//         .then(() => {
//             console.log("log: 外部第二个then")
//         })
// }


// {
//     Promise.resolve().then(res => { //then1
//         console.log('1')
//         // then1中返回一个新的promise实例 只有当then1中返回的promise状态确定后才会进行下一步的链式调用 then3
//         return new Promise((resolve, reject) => {
//             setTimeout(() => {
//                 console.log('2')
//                 resolve('newPromise')
//             }, 2000);
//         }).then(res => { // then2
//             console.log('3')
//             return "newPromise1"
//         })
//         // 有return语句，且返回了一个promise对象，对象2中的情况1
//     }).then(res => { // then3
//         console.log('4', res)
//     })

// }

// {
//     console.log(12)
//     new Promise(resolve => {
//         console.log(14)
//         setTimeout(() => {
//             console.log(6);
//             new Promise(resolve => {
//                 resolve();
//             })
//                 .then(() => { console.log(7); })
//         })
//         resolve();
//     })
//         .then(() => {
//             new Promise(resolve => {
//                 resolve();
//             })
//                 .then(() => { console.log(1); })
//                 .then(() => { console.log(2); });
//         })
//         .then(() => {
//             new Promise((resolve) => {
//                 resolve()
//             })
//                 .then(() => {
//                     new Promise((resolve) => {
//                         resolve()
//                     })
//                         .then(() => { console.log(4) })
//                 })
//                 .then(() => {
//                     console.log(5);
//                 })
//         })
//         .then(() => {
//             console.log(3);
//             new Promise((resolve) => {
//                 resolve()
//             }).then(() => {
//                 console.log(8)
//                 new Promise((resolve) => {
//                     resolve()
//                 }).then(() => {
//                     console.log(10)
//                 })
//             }).then(() => {
//                 console.log(9)

//             })

//         })
//     console.log(13)
// }

{
    console.log(1)
    setTimeout(() => {
        new Promise(resolve=>{
            resolve()
        }).then(()=>{
            console.log(2)
        })
    }, 1000);
    new Promise(resolve=>{
        resolve()
    }).then(()=>{
        console.log(3)
    }).then(()=>{
        new Promise(resolve=>{
            resolve()
        }).then(()=>{
            new Promise(resolve=>{
                resolve()
            }).then(()=>{
                console.log(4)
            }).then(()=>{
                console.log(10)
            })
        })
    }).then(()=>{
        console.log(5)
    })
    console.log(6)
    setTimeout(() => {
        console.log(7)
    }, 0);
    console.log(8)
    new Promise(resolve=>{
        console.log(9)
    })
}